<template>
  <div class="qutput_box" id="output">
    <div class="form_title itemScrollWrapper title_c_f">输出</div>
    <div class="title">
      <el-checkbox
        :value="value.orderCh"
        @input="
          $emit('input', {
            ...value,
            orderCh: $event,
          })
        "
        >按属性排序</el-checkbox
      >
    </div>
    <div class="grouping_box">
      <div class="" v-if="value.orderCh">
        <div
          class="grou_sele modul_bg grou_list"
          v-for="(li, index) in value.orderBy"
          :key="index"
        >
          <el-select
            style="margin-right: 10px"
            class="flow_sele"
            v-model="li.value"
            value-key=""
            placeholder="请选择"
            clearable
            filterable
            size="small"
          >
            <!-- 选过的属性  其他的下拉框不能在选择 -->
            <!-- 取出所有选中的>然后判断当前 是否包含当前项,如果包含就不能选择-->
            <!--  :disabled="inputList.map((i2) => i2.name).includes(item.name)" -->
            <el-option
              :disabled="
                value.orderBy.map((i2) => i2.value).includes(item.label)
              "
              v-for="item in relateData.targetCell.attributeList"
              :key="item.id"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
          <el-select
            style="width: 30%"
            class="flow_sele"
            v-model="li.order"
            value-key=""
            placeholder="请选择"
            clearable
            filterable
            size="small"
          >
            <el-option
              v-for="item in sortList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <svg-icon
            v-if="index === 0"
            class="trash icon"
            icon-class="plus"
            @click="handAdd()"
          ></svg-icon>
          <svg-icon
            v-else
            class="trash icon"
            icon-class="trash"
            @click="handDel(index)"
          ></svg-icon>
        </div>
      </div>
    </div>
    <div class="check_input">
      <div class="title">
        <el-checkbox
          :value="value.checkedLimit"
          @input="
            $emit('input', {
              ...value,
              checkedLimit: $event,
            })
          "
          >限制</el-checkbox
        >
      </div>
      <el-input
        :value="value.limit"
        onkeyup="value=value.replace(/[^\d]/g,'')"
        @input="
          $emit('input', {
            ...value,
            limit: $event,
          })
        "
        :disabled="!value.checkedLimit"
        placeholder=""
        size="small"
      ></el-input>
    </div>
    <div class="check_input">
      <div class="title">
        <el-checkbox
          :value="value.checkedOffset"
          @input="
            $emit('input', {
              ...value,
              checkedOffset: $event,
            })
          "
          >位移</el-checkbox
        >
      </div>
      <el-input
        :value="value.offset"
        onkeyup="value=value.replace(/[^\d]/g,'')"
        @input="
          $emit('input', {
            ...value,
            offset: $event,
          })
        "
        :disabled="!value.checkedOffset"
        placeholder=""
        size="small"
      ></el-input>
    </div>
    <div class="check_input">
      <div class="title">
        <el-checkbox
          :value="value.checkedOutputRateLimit"
          @input="
            $emit('input', {
              ...value,
              checkedOutputRateLimit: $event,
            })
          "
          >输出速率</el-checkbox
        >
      </div>
      <el-autocomplete
        style="width: 100%"
        :disabled="!value.checkedOutputRateLimit"
        size="small"
        class="inline-input"
        :value="value.outputRateLimit"
        @input="
          $emit('input', {
            ...value,
            outputRateLimit: $event,
          })
        "
        :fetch-suggestions="querySearch"
        placeholder=""
      ></el-autocomplete>
    </div>
    <div class="check_input summary">
      <div class="title">操作</div>
      <el-select
        :value="value.queryOutput.type"
        @input="
          $emit('input', {
            ...value,
            queryOutput: { ...value.queryOutput, type: $event },
          })
        "
        :disabled="isOperation"
        class="flow_sele"
        value-key=""
        placeholder="请选择"
        clearable
        filterable
        size="small"
      >
        <el-option
          v-for="item in insertList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <!-- Set -->
    <div
      v-if="
        value.queryOutput.type === 'UPDATE' ||
        value.queryOutput.type === 'UPDATE_OR_INSERT_INTO'
      "
    >
      <div class="title">
        <el-checkbox
          :value="value.queryOutput.output.checkedSet"
          @input="
            $emit('input', {
              ...value,
              queryOutput: {
                ...value.queryOutput,
                output: {
                  ...value.queryOutput.output,
                  checkedSet: $event,
                },
              },
            })
          "
          >Set</el-checkbox
        >
      </div>
      <div v-if="value.queryOutput.output.checkedSet">
        <div>
          <el-row
            type="flex"
            :gutter="10"
            align="middle"
            v-for="(item, index) in setList"
            :key="item.id"
            style="margin-bottom: 10px"
          >
            <el-col :span="18">
              <el-autocomplete
                style="width: 100%"
                size="small"
                class="inline-input"
                v-model="item.attribute"
                @change="setModel()"
                :fetch-suggestions="
                  (queryString, cb) => {
                    querySearch(
                      queryString,
                      cb,
                      relateData.targetCell.attributeList
                    );
                  }
                "
                placeholder=""
                @select="handleSelect"
              ></el-autocomplete
            ></el-col>
            <el-col :span="5">
              <el-autocomplete
                @change="setModel()"
                style="width: 100%"
                size="small"
                class="inline-input"
                v-model="item.value"
                :fetch-suggestions="
                  (queryString, cb) => {
                    querySearch(
                      queryString,
                      cb,
                      relateData.sourceCell.attributeList
                    );
                  }
                "
                placeholder=""
                @select="handleSelect"
              ></el-autocomplete
            ></el-col>
            <el-col :span="1">
              <svg-icon
                v-if="index === 0"
                class="trash icon"
                icon-class="plus"
                @click="handSetAdd()"
              ></svg-icon>
              <svg-icon
                v-else
                class="trash icon"
                icon-class="trash"
                @click="handSetDel(index)"
              ></svg-icon>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="check_input" v-if="value.queryOutput.type !== 'INSERT'">
      <div class="title">正在进行中</div>
      <!-- 取上一个节点信息 -->
      <!-- 带下拉的输入框 -->
      <PopoverInput
        :value="value.queryOutput.output.on"
        @input="
          $emit('input', {
            ...value,
            queryOutput: {
              ...value.queryOutput,
              output: {
                ...value.queryOutput.output,
                on: $event,
              },
            },
          })
        "
        keys="conductValue"
      ></PopoverInput>
    </div>
    <div class="check_input">
      <div class="title summary">插入</div>
      <!-- 取上一个节点信息 -->
      <el-input
        :value="value.queryOutput.target"
        @input="
          $emit('input', {
            ...value,
            queryOutput: { ...value.queryOutput, target: $event },
          })
        "
        :disabled="true"
        placeholder=""
        size="small"
      ></el-input>
    </div>
    <div class="check_input">
      <div class="title">事件类型</div>
      <!-- emit写的太low了,后期优化 -->
      <el-select
        :value="value.queryOutput.output.eventType"
        @input="
          $emit('input', {
            ...value,
            queryOutput: {
              ...value.queryOutput,
              output: {
                ...value.queryOutput.output,
                eventType: $event,
              },
            },
          })
        "
        class="flow_sele"
        value-key=""
        placeholder="请选择"
        clearable
        filterable
        size="small"
      >
        <el-option
          v-for="item in eventType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { EventType, sortList, displacement, insert } from "@/utils/local";
import { generateId } from "@/utils/index";
import { mapGetters } from "vuex";

import PopoverInput from "@/components/PopoverInput";
export default {
  components: { PopoverInput },
  props: {
    value: {
      required: true,
    },
    attributeList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    // 默认值
    value: {
      handler: function (newValue, oldData) {
        const setList =
          (this.value.queryOutput &&
            this.value.queryOutput.output &&
            this.value.queryOutput.output.set) ||
          [];
        if (setList && setList.length) {
          this.setList = [];
          // this.formChk.attrChecked = true;
          setList.forEach((item) => {
            this.setList.push({
              ...item,
              id: generateId(),
            });
          });
        }

        // this.inputList.for
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    ...mapGetters(["relateData"]),
    // 除了table,其他的默认选中第一个,且不可选择
    isOperation() {
      const relateData = this.$store.state.projection.relateData;
      const isTrue =
        relateData.targetCell && relateData.targetCell.type !== "tableList";
      if (isTrue) {
        // this.$emit("input", {
        //   ...this.value,
        //   queryOutput: { ...this.value.queryOutput, type: "INSERT" },
        // });
      }
      return isTrue;
    },
  },
  data() {
    return {
      setList: [
        {
          label: "",
          value: "",
          id: generateId(),
        },
      ],
      checkedSet: "",
      conductValue: "",
      insertValue: "",
      attrSortList: [
        {
          id: generateId(),
          attrValue: "",
          sortValue: "",
          attributeList: this.attributeList,
        },
      ],
      insertList: insert,
      attrValue: "",
      sortValue: "",
      checkedAttr: false,
      sortList: sortList,
      radio: 1,
      eventTypeValue: "",
      eventType: EventType,
      name: "",
      checkedLimit: false,
      checkedOffset: false,
      checkedRateLimiting: false,
      form: {
        limit: "",
        offset: "",
        rateLimiting: "",
      },
      restaurants: displacement,
    };
  },
  methods: {
    // set添加
    handSetAdd() {
      this.setList.push({
        label: "",
        value: "",
        id: generateId(),
      });
    },
    handSetDel(i) {
      this.setList.splice(i, 1);
      this.setModel();
    },
    setModel() {
      // g更新父组件的 数据
      this.$emit("input", {
        ...this.value,
        queryOutput: {
          ...this.value.queryOutput,
          output: {
            ...this.value.queryOutput.output,
            set: this.setList,
          },
        },
      });
    },
    changeRadio(row) {
      this.conductValue = row.value;
    },
    handleSelect(item) {
      // console.log(item);
      // 选择输入框的下拉框触发-修改父组件model
      this.setModel();
    },
    querySearch(queryString, cb, list = this.restaurants) {
      var restaurants = list;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handAdd() {
      if (this.value.orderBy.length >= this.attributeList.length) {
        this.$msg("超出属性,不可添加");
        return;
      }
      this.$emit("handAddOrderBy");
      // this.attrSortList.push({
      //   id: generateId(),
      //   attrValue: "",
      //   sortValue: "",
      //   attributeList: this.attributeList,
      // });
    },
    handDel(i) {
      this.$emit("handDelOrderBy", i);
    },
  },
};
</script>

<style lang='scss' scoped>
.qutput_box {
  margin-top: 20px;
  /* .输出{

  } */
  .flow_sele {
    width: 100%;
  }
  .check_input {
    width: 100%;
  }
  .title {
    margin: 20px 0;
    font-size: 14px;
    color: #666;
  }
  .grouping_box {
    .icon {
      margin-left: 6px;
      color: #999;
    }
    .grou_list {
      padding: 10px;
    }

    .title {
      margin: 20px 0;
    }
  }
  .grou_sele {
    display: flex;
    align-items: center;
  }
}
</style>